import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components'
import { AtTimeline } from 'taro-ui'
import { http } from '../../utils/http'
import {LOGISTICS} from '../../constants/api'
import { LogisticsType } from '../../utils/server.interface'
import './logistics.scss'
import { user } from '../../utils/user.service'
import {platform} from "../../utils/platform-settting.service";
import {GetRequest,vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
interface StateType {
    items: TimeLineItem[];
    logistics: LogisticsType | false;
}
interface TimeLineItem {
    title: string;
    content?: string[];
    icon?: string;
    color?: string;
}

export default class Logistics extends Component {
    state: StateType = {
        items: [],
        logistics: false
    }
    itemId = 0
    async componentDidMount() {
      const platformSet = await platform.getSetting()
      if (platformSet.platformName) {
        Taro.setNavigationBarTitle({
          title: platformSet.platformName
        })
      }
    }
    async componentDidShow() {
        vcmonitor(this)
        if(!Taro.getCurrentInstance().router.params.itemId) {
            Taro.showModal({
                title: '错误提示',
                content: '无效的参数',
                success: (res) => {
                    if(res.confirm) {
                        Taro.navigateBack()
                    }
                }
            })
        }
        Taro.showLoading({ title: '加载信息中...' })
        const isLogin = await user.checkLogin()
        if(!isLogin) {
            Taro.showModal({
                title: '提示',
                content: '您还没有登录，请先登录',
                success: res => {
                    if(res.confirm) {
                        Taro.switchTab({
                            url: '/pages/my/index/index'
                        })
                    }
                },
                showCancel: false
            })
        }
        this.itemId = parseInt(Taro.getCurrentInstance().router.params.itemId) || 0
        const logistics = await http.get<LogisticsType>(LOGISTICS, {orderId: this.itemId})
        let items: TimeLineItem[] = []
        if(logistics && logistics.trackinfo.length > 0) {
            items = logistics.trackinfo.map(item => {
                return {
                    title: item.StatusDescription,
                    content: [item.Date],
                    icon: ''
                }
            })
        }

        this.setState({ items, logistics })
        setTimeout(() => {
            Taro.hideLoading()
        }, 100);
    }
    render() {
        const { items, logistics } = this.state
        return(
            <View className="logistics">
                <GzhAuth />
                <View className="head">
                    <View className="info-box">
                        <View className="express-item express-name">{logistics ? logistics.carrier_name : '快递'}</View>
                        <View className="express-item express-number" onClick={() => {
                            if(logistics) {
                                Taro.setClipboardData({
                                    data: logistics.tracking_number
                                })
                              if(process.env.TARO_ENV==='h5'){
                                Taro.showToast({ title: '复制成功'})
                              }
                            }
                        }}><Text>快递单号: {logistics ? logistics.tracking_number : ''}</Text><Text className="tips">复制</Text></View>
                      {logistics && logistics.phone && <View className="express-item express-kefu">官方客服: {logistics.phone}</View>}
                    </View>
                </View>
                <View className="content-box">
                    <AtTimeline items={items} pending></AtTimeline>
                </View>
            </View>
        )
    }
}
